@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libertinus+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
/* gogle font para buscar fuentes para distintos estilos, @import linkear coodigo en style arriba de todo con font-family copiando apartir del =*/

/* crear un selector + propiedad + valor
selector - 
propiedad (color) : valor 
luego es necesario vincular

LA HERENCIA EN CSS ALGUNOS ESTILOS PASAN DE LOS ELEMENTOS PADRES A HIJOS DIV

LA CASCADA EN CSS: Determinara el orden en que se aplican las reglas
*/
p {
    /* color:palevioletred; */
    /* Nombre de color en hexagesimal,rgb y rgba */
    /* color: #b2d6f9 Hexagesinal
    */
    /* color:rgb(rgb(198, 21, 21), rgb(33, 149, 33), rgb(4, 4, 245)); */
    /* color:rgba(0,0, 255, 0.5); alfha da opacidad en el color */
    font-size: 30p;
    /* tamaños de las letras, distintas unidades; px (tecto general) % ( ancho y alto)*/
    margin: 20px;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.encabezado {
    background-color: rgb(187, 36, 91);
    display: flex;
    align-items: center;
    justify-content: center;
}
header section{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}
ul{
    display: flex;
    list-style: none;
}

li{
    margin: 0 10px;
    border: 1px solid  rgb(246, 147, 147);
    background: rgb(246, 147, 147);
    border-radius: 5px;
    padding: 3px;
}

/* titulo color+centrado */
h1{ 
    font-family: Dancing Script;
    font-size: 500%;
    color:rgb(246, 147, 147);
    text-align: center;
}
.subtitulo{
    font-family: libertinus mono;
    color: rgb(246, 147, 147);
    text-align: center;
}
/* cambio de color del cuerpo de la estructura */
body{
    font-family: dm sans;
    background-color:rgb(246, 147, 147);
}
div{ color:rgb(7, 4, 1);
}

.logo{
    display: flex;
    justify-content: left;
    height: 150px;
    width: auto;
}
.rrhh{
    height: 100px;
    width: auto;
}
.WhatsApp{
    position:fixed;
    bottom: 50px;
    right: 50px;
    height: 100px;
    width: auto;
}
.d-block{
    height: 100vh;
    width: auto;
}
.carru  {
    display: flex;
    justify-content: center;
    align-items: center;
}
.tienda{
    margin: 10px;
    height: 30vh;
    width: auto;
    display: inline-block;

}
/*centrar imagen*/
.Sobremi{
    margin: 0;
    padding: 0;
    padding: 30px;
    margin: auto;
    margin-top: 15px;
}

.fotomia{
    margin: 10px;
    height: 70vh;
    padding: 30px;
    margin: auto;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    }

.Pregunta{
    margin: 0;
    padding: 0;
    padding: 15px;
    margin: auto;
    margin-top: 15px;
}

.Venta{
    display: flex;
    flex-direction: column;
}
.productos{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.producto{
    display: flex;
    flex-direction: column;
    height: auto;
    width: 30vw;
}

.contenedorgaleria{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 300px;
    padding: 20px;
    grid-gap: 10px;

}

.img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.galeria:nth-child(1){
    grid-column-start: span 2;
    grid-row-start: span 2;
}
.galeria:nth-child(3){
    grid-row-start: span 2;
}
.galeria:nth-child(4){
    grid-row-start: span 2;
}
.galeria:nth-child(7){
    grid-row-start: span 2;
}
.galeria:nth-child(9){
    grid-column-start: span 2;
}

.pie{
    margin: 20px;
}
.pie h2{
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.formulario{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

form{
    width: 400px;
    background-image: url(../Wireframe/fotoContacto.png) ;
    background-size: contain;
    padding: 30px;
    margin: auto;
    margin-top: 50px;
}

.Controls{
    width: 100%;
    background: white;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 16px;
    border: 1px solid rgb(251, 118, 151);
}

.Mensaje{
    width: 100%;
    background: white;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 16px;
    border: 1px solid rgb(251, 118, 151);
}

.Botton{
    width: 100%;
    background: rgb(251, 118, 151) ;
    border: none;
    padding: 12px;
    color: white;
    margin: 16px 0;
    font-size: 16px;
}

@media (max-width: 425px ) {
    header{
        flex-direction: column;
    }
    h1{display: none;}
    h2{display: none;}
}